<template>
<div class='wrap'>

      <v-header :userName="userNameHeader"></v-header>

  <div class='detail'>
    <section @click.stop='back' class="return" style='display:inline-block'><a>返回上层</a></section>
    <section v-if='isShowRelate' @click.stop='goOther' class="return" style='display:inline-block'><a>查看该流程{{isLeaveOrXiao(this.res.executeType) =='请'?'销':'请'}}假申请</a></section>

    
    <section class="view">
        <div class="header">
            <span :class="{xiaojia:res.executeType == 3 || res.executeType == 4}">{{res.executeType | handleTitle}}</span>
            <span>{{wfBusinessProcessData.emplname}}的{{res.executeType | handleTitle}}假申请</span>
            <span class="right last">{{res.id}}</span>
            <span class="right">审批编号</span>
        </div>
        <div class="content">
            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4"}' class='color-one'>{{res.executeType | handleTitle}}假类型</span>
                <span>{{wfBusinessProcessData.processTypeName}}
                    <el-tooltip
                        v-for='(k) in aTypeSelect'
                        v-if='k.name == wfBusinessProcessData.processTypeName'
                        :content='k.content'
                        :key="k.confId"
                        popper-class='tooltip-300'
                    >
                        <i class="wenhao">?</i>
                    </el-tooltip>
                </span>
            </div>
            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>{{res.executeType=="3" || res.executeType=="4" ?"实际":""}}开始时间</span>
                <!-- <span>{{wfBusinessProcessData.startTime | handleDisplayDate}}</span> -->
                <span>{{(res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeStartTime : wfBusinessProcessData.startTime) | handleDisplayDate}}</span>
                <span class='color-one'>{{(res.executeType=="3" || res.executeType=="4" ?wfBusinessProcessData.effeStartTimeHalfDaySign : wfBusinessProcessData.startTimeHalfDaySign) | ampm}}</span>
            </div>
            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>{{res.executeType=="3" || res.executeType=="4" ?"实际":""}}结束时间</span>
                <!-- <span>{{wfBusinessProcessData.endTime | handleDisplayDate}}</span> -->
                <span>{{(res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeEndTime : wfBusinessProcessData.endTime) | handleDisplayDate}}</span>
                <!-- <span class='color-one'>{{wfBusinessProcessData.endTimeHalfDaySign | ampm}}</span> -->
                <span class='color-one'>{{(res.executeType=="3" || res.executeType=="4" ?wfBusinessProcessData.effeEndTimeHalfDaySign : wfBusinessProcessData.endTimeHalfDaySign) | ampm}}</span>
            </div>
            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>{{res.executeType | handleTitle}}假天数</span>
                <!-- <span>{{wfBusinessProcessData.leaveDay}} 天</span> -->
                <span>{{ res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeLeaveDay : wfBusinessProcessData.leaveDay}}</span>
            </div>
            <div >
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one floatReasonTitle'>{{res.executeType | handleTitle}}假事由</span>
                <span class="reasonTitle">{{handleLeaveReason(res.executeType)}}</span>
            </div>
            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>当前步骤</span>
                <span :class="handleColor(res.executeNodeName)">{{res.executeNodeName}}</span>
            </div>
            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one' style='margin-right:2px'>知会人&nbsp;&nbsp;&nbsp;</span>
                <span v-if='zhihuiren.length>0'>{{zhihuiren.join(' , ')}}</span><span v-else>无</span>
            </div>

            <div>
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>附件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <div class="fileContainer">
                    <div class="imgContainer" v-if='imgList.length'>
                        <template v-for="(k,index) in imgList">
                            <img width="100px" @click="showLightBox(index)" :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.annexId+"&token="+token' alt="" />
                        </template>
                    </div>
                
                    <a  v-if='fileList.length'>
                        <a 
                        :href='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.annexId+"&token="+token'
                        style='display:block' 
                        class='color-third'
                        v-for='(k,i) in fileList'
                        >
                            <i :class="handleFileType(k.fileHz)"></i>
                            <span>{{k.fileName}}</span>
                        </a>
                    </a>
                </div>
                <!-- <p style='margin-left
:14px' v-if='fileList.length === 0 && imgList.length === 0'>无</p> -->
            </div>    
        </div>
        <section class="steps" >
            <div v-for='(k,i) in LogList' class='steps-list' :class="{ last : i == LogList.length - 1,'isShowXian': !k.status || k.status == 6 || k.status == 8 }"  v-changeHeight>

                <div class="date">{{k.excuteTime | handleDateToSeconds}}</div>

                <div class="xian" :class='{ last:i == LogList.length - 1 }'>
                    <span class="el-icon-circle-check" :class='{ok:k.status == 1 || k.status == 5 || k.status == 7 || k.status == 3}'></span>
                    <span v-for='(q,j) in form.shenpiSelect' class="add-icon" style='margin-top:40px' v-if='k.status == 2'>
                        <a>{{q.name}} ({{q.dept_descr}})</a>
                        <a>待审批</a>
                    </span>

                    <span title='只有同意时有效' @click.stop="dialog2Visiable = true" class="add add-icon" v-if='k.status == 2'>
                        <a>添加审批人</a>
                    </span>
                  
                </div>
                <div class="people">
                    <span>{{k.status == 5 ?  k.oldAssigneeName  : k.assigneeName }}</span>
                    <span class="color-one">({{k.deptDescr}})</span>   
                    <div style="margin-top:4px;" v-if="k.wfSubProcessNodes && k.wfSubProcessNodes.length" v-for="q in k.wfSubProcessNodes">
                        <span class="name">{{q.assigneeName}}</span>
                        <span class="dept color-one">({{q.deptDescr}})</span>
                        <span class="checking" style="margin-right: -123px;float:right;">审批中 (代理)</span>                                  
                    </div>
                </div> 

                <div class="buzhou" :class='handleColor(k.status)'> 
                    {{k.status | alterStatusTitle}}
                </div>
                <p class='message'>
                    {{k.status == 5 ? '' : k.applyComment }}
                </p>
              
            </div>             
        </section>


        <section class="deside" v-if='buttonFlag'>
            <a class="return" :class='{select:type=="同意"}' @click.stop='type="同意"'>同意</a>
            <a class="return" :class='{select:type=="驳回"}' @click.stop='type="驳回"'>驳回</a>
            <a class="return" @click.stop="dialogVisiable = true">知会</a>
        </section>
        
        <section class="deside" v-else>
            <el-button disabled>已{{type}}</el-button>
        </section>



        <section class="text-area">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="placeholder"
              v-model.trim="textarea"
              :disabled="!type">
            </el-input>
            <el-button
              v-if='status!==1'
              class="submit" 
              type="primary"
              :disabled="!type"
              @click.stop='onSubmit'
              >
              提交<span v-if="type"></span>
            </el-button>
        </section>


         <el-dialog
            custom-class='dialog'
            :visible.sync="dialog2Visiable"
            top='2vh'
            lock-scroll
            @open='oldShenpi = form.shenpiSelect'
          > 
          <span slot="title" class="dialog-title">
            选择审批人
          </span>

          

          <el-row class="body" justify='space-between'>
            
            <el-col class="body-left" :span='12'>
                <el-row>
                  <el-col :span='22'>
                    <el-input
                    icon="search"
                    class="input" placeholder="搜索 拼音 名字 编号"
                    v-model='shenpiInput'
                    @keyup.enter.native='shenpiSearch'
                    :on-icon-click="shenpiSearch"></el-input>
                  </el-col>
                </el-row>

              
                <section class="mianbao">

                  <el-tooltip popper-class='tooltip2' :content="getCcList2.fristDept && getCcList2.fristDept.descr" placement="top">
                    <p :style='mianbaoShowIf("b")?"":"overflow:visible"' @click.stop='sendBumenAjax2(getCcList2 && getCcList2.fristDept)'>{{getCcList2.fristDept && getCcList2.fristDept.descr}}</p>
                  </el-tooltip>

                  <span v-if='mianbaoShowIf("b")' class="el-icon-arrow-right"></span>
                  <el-tooltip v-if='mianbaoShowIf("b")' popper-class='tooltip2' :content="getCcList2.checkDept && getCcList2.checkDept.descr" placement="top">
                    <p>{{getCcList2.checkDept && getCcList2.checkDept.descr}}</p>
                  </el-tooltip>	
                  
                </section>

          
                <section class="bumen" v-if='getCcList2.deptList && getCcList2.deptList.length'>
                  <p v-for='(k,i) in getCcList2.deptList' @click.stop='sendSecondBumenAjax2(k)'>
                    <span>{{k.descr}}</span>
                    <span class="el-icon-arrow-right"></span>
                  </p>
                </section>

                <section class="checkbox" v-if='getCcList2'>
                  <el-checkbox-group  v-model='form.shenpiSelect'>
                    <p v-for='(k,i) in getCcList2.empList'>
                       
                      <el-checkbox :label='k'>{{k.name}}</el-checkbox><span style="font-size:12px;">&nbsp;&nbsp;{{k.emplid}}&nbsp;</span><span style="font-size:12px;" :title="k.dept_descr">({{k.dept_descr}})</span>
                     
                    </p>

                  </el-checkbox-group> 
                </section>

          
            </el-col>

            <el-col class="body-right" :span='12'>
              <el-row class="body-right-title" tag='h2'>
                已选择审批人
              </el-row> 
            <el-row class="body-right-content" v-for='(k,i) in form.shenpiSelect'>
              <el-row><el-col>{{k.name}}<span>({{k.emplid}})</span></el-col><el-col @click.native='form.shenpiSelect.splice(i,1)'>删除</el-col></el-row>
            </el-row>
        
            </el-col>
            
          </el-row>

          <div class="dialog-footer">
            <el-button @click.stop="shenpiSure" type="primary">确 定</el-button>
            <el-button @click.stop = "closeShenpi">取 消</el-button>
          </div>

         </el-dialog>


          <el-dialog
              
                custom-class='dialog'
                :visible.sync="dialogVisiable"
                top='2vh'
                lock-scroll
                @open='oldZhihuiren = zhihuirenSelect'

              > 
                <span slot="title" class="dialog-title">
                  选择知会人
                </span>

                

                <el-row class="body" justify='space-between'>
                  
                  <el-col class="body-left" :span='12'>
                      <el-row>
                        <el-col :span='22'>
                          <el-input
                          icon="search"
                          class="input" placeholder="搜索 拼音 名字 编号"
                          @keyup.enter.native='zhihuiSearch'
                          v-model='zhihuiInput'
                          :on-icon-click="zhihuiSearch"></el-input>
                        </el-col>
                      </el-row>

                    
                      <section class="mianbao">

                        <el-tooltip popper-class='tooltip2' :content="getCcList.fristDept && getCcList.fristDept.descr" placement="top">
                          <p :style='mianbaoShowIf("a")?"":"overflow:visible"' @click.stop='sendBumenAjax(getCcList && getCcList.fristDept)'>{{getCcList.fristDept && getCcList.fristDept.descr}}</p>
                        </el-tooltip>

                        <span v-if='mianbaoShowIf("a")' class="el-icon-arrow-right" style="margin-top:4px"></span>
                        <el-tooltip v-if='mianbaoShowIf("a")' popper-class='tooltip2' :content="getCcList.checkDept && getCcList.checkDept.descr" placement="top">
                          <p>{{getCcList.checkDept && getCcList.checkDept.descr}}</p>
                        </el-tooltip>

                      </section>

                
                      <section class="bumen" v-if='getCcList.deptList && getCcList.deptList.length'>
                        <p v-for='(k,i) in getCcList.deptList' @click.stop='sendSecondBumenAjax(k)'>
                          <span>{{k.descr}}</span>
                          <span class="el-icon-arrow-right"></span>
                        </p>
                      </section>

                      <section class="checkbox" v-if='getCcList'>
                        <el-checkbox-group v-model='zhihuirenSelect'>
                          <p v-for='(k,i) in getCcList.empList' :key='i' style="padding:7px 0">
                            <el-checkbox :label='k'>{{k.name}}</el-checkbox><span style="font-size:12px;">&nbsp;&nbsp;{{k.emplid}}&nbsp;</span><span style="font-size:12px;" :title="k.dept_descr">({{k.dept_descr}})</span>
                          </p>
                        </el-checkbox-group> 
                        
                      </section>

                
                  </el-col>

                  <el-col class="body-right" :span='12'>
                    <el-row class="body-right-title" tag='h2'>
                      已选择知会人
                    </el-row>     
                  <el-row class="body-right-content" v-for='(k,i) in zhihuirenSelect'>
                    <el-row><el-col>{{k.name}}<span>({{k.emplid}})</span></el-col><el-col @click.native='zhihuirenSelect.splice(i,1)'>删除</el-col></el-row>
                  </el-row>
              
                  </el-col>
                  
                </el-row>

                <div class="dialog-footer">
                  <el-button @click.stop="sureSave" type="primary">确 定</el-button>
                  <el-button @click.stop="closeZhihuiren">取 消</el-button>
                </div>

          </el-dialog>
    </section>
  </div>
  	<light-box :selected.sync="selected" :imgUrlList="imgUrlList" :visiblable.sync="visiblable"></light-box>
  </div>
</template>

<script>
import Vue from 'vue';
import {
  Message,
  MessageBox,
  Dialog,
  Row,
  Col,
  Checkbox,
  CheckboxGroup,
  Tooltip
} from 'element-ui';
import header from '@/components/employee/header';

import lightBox from '@/components/employee/requestVacation/lightBox';

Vue.use(Dialog);
Vue.use(Row);
Vue.use(Col);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Tooltip);

export default {
  components: {
    'v-header': header,
    'light-box': lightBox
  },
  computed: {
    placeholder() {
      if (this.type) {
        return `请填写审批意见`;
      } else {
        return '请先选择同意或驳回';
      }
    },
    buttonFlag() {
      if (this.status == 1) {
        return false;
      }
      return true;
    }
  },
  created() {
      let queryData;
      if (typeof this.$route.query.id === 'string') {
          queryData = this.$route.query.id;

      } else {
          queryData = window.location.href.split('?')[1];
      }
      this.params = {
          subProcessId: queryData,
          subProcessId: queryData
      };
      this.token = localStorage.getItem('token');

      
  },
  mounted() {

    this.getZhihuirenData();

    this.getShenpiData();

    this.Axios
        .Post(this.URL.examineBydetails.url, this.params)
        .then(res => {
            this.res = res.data.datas;
            this.wfBusinessProcessData = this.res.wfBusinessProcessData;
            
            if (this.isLeaveOrXiao(this.res.executeType) == '请') {
                var relate_id = this.res.wfMainProcess.endSubProcessId;
                this.isShowRelate = relate_id ? true : false; //显示关联请销假记录按钮
                this.xiaojiaVisible = this.res.wfMainProcess.executeSubProcessKey !== this.res.wfMainProcess.startSubProcessKey && !relate_id ? true : false; //显示是否可以发起销假按钮
                this.relate_id = relate_id
            } else {
                var relate_id = this.res.wfMainProcess.startSubProcessId;
                this.isShowRelate = relate_id ? true : false; //显示关联请销假记录按钮
                this.relate_id = relate_id;
            }
            
            this.res.sponsorNodes[0].status = 5; //自定义status 为5 代表我发起
            if (this.res.recordNodes && this.res.recordNodes.length) {
                if (this.res.recordNodes[0].status == 2){
                    this.res.recordNodes[0].status = 6;
                } else if (this.res.recordNodes[0].status == 1){
                    this.res.recordNodes[0].status = 7;
                } else if (this.res.recordNodes[0].status == 3){
                    this.res.recordNodes[0].status = 3;
                }else {
                    this.res.recordNodes[0].status = 8;
                }
            }

            var resultList = this.res.annexNexus;
            resultList.forEach((val, index, arr) => {
                if (this.handleFileType(val.fileName) === 'img') {
                    this.imgList.push(val);
                    this.imgUrlList.push(
                      this.Axios.baseURI +
                        '/' +
                        this.URL.downloadFile.url +
                        '?id=' +
                        val.annexId +
                        '&token=' +
                        this.token
                    );
                } else {
                    this.fileList.push(val);
                }
            });


            this.LogList = this.res.sponsorNodes.concat(this.res.approvalNodes,this.res.recordNodes || []);
            

            this.res.copySends.forEach((ele, index, arr)=>{
                this.zhihuiren.push(ele.toEmplName);
                this.zhihuirensSave.push({
                    name:ele.toEmplName,
                    emplid:ele.toEmplid
                });
            })   
        });

    this.getVacationDetail();
  },

  data() {
    return {
        zhihuiInput: null,
        active: 2,
        type: null,
        status: null,
        detailData: null,
        textarea: '',
        nextPeople: null,
        fileList: [],
        userNameHeader: localStorage.getItem('userName'),
        token: null,
        query: null,
        LogList: [],
        zhihuirenSelect: [],
        oldZhihuiren: [],
        getCcList: [],
        getCcList2: [],
        oldShenpi: [],
        shenpiInput: null,
        dialogVisiable: false,
        dialog2Visiable: false,
        selected: 0,
        visiblable: false,
        imgList: [],
        imgUrlList: [],
        aTypeSelect: [],
        zhihuiren: [],
        form: {
          shenpiSelect: []
        },
        hrVisible: false,

        res:{},
        wfBusinessProcessData:{},
        isShowRelate:false,
        relate_id:'',
        zhihuirensSave:[],
    };
  },
  filters: {
      ampm: function(value) {
          if (value == '1') {
              return '上午';
          } else if (value == '2') {
              return '下午';
          }
      },
      handleTitle:function(val){
          return val == '1' || val == '2'? '请' : '销' ;
      },
      handleDisplayDate: function(val){
          if (val) {
              return val.split(' ')[0];
            //   var dataObj = new Date(Date.parse(val.replace(/-/g,"/")));  
            //   var year = dataObj.getFullYear();
            //   var month = dataObj.getMonth() + 1;
            //   month = month > 9 ? month : '0' + month;
            //   var day = dataObj.getDate();
            //   day = day > 9 ? day : '0' + day;
            //   return year + "-" + month + "-" + day 
          } else {
              return ''
          }
      },
      handleDateToSeconds:function(time){
          if (time) {
              var dataObj = new Date(Date.parse(time.replace(/-/g,"/")))
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              var hours = dataObj.getHours();
              hours = hours > 9 ? hours : '0' + hours;
              var minutes = dataObj.getMinutes();
              minutes = minutes > 9 ? minutes : '0' + minutes;
              var seconds = dataObj.getSeconds();
              seconds = seconds > 9 ? seconds : '0' + seconds;
              return year + "-" + month + "-" + day + '   '  + hours + ':' + minutes + ':' + seconds;
          } else {
              return ''
          }        
      },
    alterStatusTitle:function(strNum){
        switch (strNum) {
            case 0 : 
                return '待审批'
                break;                  
            case 1 :
                return '已审批'
                break;
            case 2 :
                return '审批中'
                break;
            case 3:
                return '已拒绝'
                break;
            case 4:
                return '无需执行'
                break;
            case 5: //自定义status 5 后台不返回
                return '我发起'
                break;
            case 6 :
                return '备案中'
                break;
            case 7 :
                return '已备案'
                break;
            case 8 :
                return '待备案'
                break;
            case 9 :
                return '待审批'
                break;

        }
    },
  },

  directives: {
    changeHeight: {
      // inserted(el, binding, vnode) {
      //   let targetHeight, xian;
      //   targetHeight = el.querySelector('.message').offsetHeight;
      //   xian = el.querySelector('.xian');
      //   if (xian.className === 'xian') {
      //     if (el.querySelector('.buzhou').innerText == '审批中') return;
      //     xian.style.height = targetHeight + 'px';
      //   }
      // }
    }
  },

  methods: {


    isHaveSameCopyPeo:function(selectArr){
        // var arr = this.copyToPeoList.concat(this.zhihuirensSave);
        
        for (var j = 0;j<selectArr.length ;j++) {
            for (var i = 0; i < this.zhihuirensSave.length; i++) {
                if (this.zhihuirensSave[i].emplid == selectArr[j].emplid) {
                   console.log(false,'false');
                   Message({
                        message: '知会人 ' + selectArr[j].name + ' 添加重复',
                        type: 'warning'
                    });
                    console.log(false,'false');
                    return false;  
                }
            }
        }
        return true;
    },


    isLeaveOrXiao:function(val){
        return val == '1' || val == '2'? '请' : '销' ;
    },

    handleLeaveReason(excuteType){
        if (excuteType == 1 || excuteType == 2) {
            return this.res.wfBusinessProcessData.leaveReason 
        } else if (excuteType == 3 || excuteType == 4) {
            return this.res.wfBusinessProcessData.sickLeaveReason
        }
        
    },

    shenpiSure() {
        this.dialog2Visiable = false;

        let showName = [];

        for (let index = 0; index < this.LogList.length; index++) {
            if (index === 0 || index === this.LogList.length - 1) {
                continue;
            }
            this.form.shenpiSelect.forEach((item, i, arr) => {
                if (this.LogList[index].emplid == item.emplid) {
                    showName.push(item.name);
                    arr.splice(i, 1);
                }
            });
        }

        if (showName.length) {
          const info = showName.join('、');
          Message({
            message: `${info}已在审批流程中,无法重复添加`,
            type: 'error'
          });
        }
    },
    getHrVisible() {
      this.Axios.Post(this.URL.isHR.url).then(
        res => (this.hrVisible = !!res.data.datas)
      );
    },

    goOther() {

        window.open('#/requestVacation/t2detail?' + this.relate_id);
    },

    showLightBox(index) {
      this.visiblable = false;
      if (!index) {
        Vue.nextTick(() => {
          this.visiblable = true;
        });
      }
      this.selected = index;
    },

    mianbaoShowIf() {
      if (this.getCcList) {
        if (this.getCcList.fristDept && this.getCcList.fristDept.descr !== this.getCcList.checkDept.descr) {
          return true;
        }
      }
      return false;
    },


    handleColor(str) {
        switch (str) {
            case 1:
              return 'pass';
              break;
            case '已备案':
              return 'pass';
              break;
            case '已同意':
              return 'pass';
              break;
            case 3:
              return 'nook';
              break;
            default:
              return 'checking';
              break;
        }
    },
    handleFileType(name) {
      let type = name && name.split('.')[1];
      if (
        type == 'jpg' ||
        type == 'jpeg' ||
        type == 'png' ||
        type == 'svg' ||
        type == 'gif' ||
        type == 'bmp'
      ) {
        return 'img';
      } else if (type == 'doc' || type == 'docx') {
        return 'word';
      } else if (type == 'xls' || type == 'xlsx') {
        return 'excel';
      } else {
        return 'file';
      }
    },
    closeZhihuiren() {
      this.zhihuirenSelect = this.oldZhihuiren;
      this.dialogVisiable = false;
    },
    closeShenpi() {
      this.form.shenpiSelect = this.oldShenpi;
      this.dialog2Visiable = false;
    },
    zhihuiSearch() {
      if (!this.zhihuiInput) {
        this.getZhihuirenData();
      } else {
        let params = {
          search: this.zhihuiInput,
          setid: this.getCcList.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;
          if (list && list.length) {
            this.getCcList.checkDept.descr = '搜索结果';
            this.getCcList.deptList = [];
            this.getCcList.empList = list;
          } else {
            Message({
              message: '查无此人,请调整关键字,重新搜索',
              type: 'error'
            });
          }
        });
      }
    },

    shenpiSearch() {
      if (!this.shenpiInput) {
        this.getShenpiData();
      } else {
        let params = {
          search: this.shenpiInput,
          setid: this.getCcList2.fristDept.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          let list = res.data.datas.empList;
          if (list && list.length) {
            this.getCcList2.checkDept.descr = '搜索结果';
            this.getCcList2.deptList = [];
            this.getCcList2.empList = list;
          } else {
            Message({
              message: '查无此人,请调整关键字,重新搜索',
              type: 'error'
            });
          }
        });
      }
    },
    sendSecondBumenAjax2(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          empList: getCcList.empList,
          checkDept: getCcList.checkDept
        } = data);
      });
    },

    getShenpiData() {
      this.Axios.Post(this.URL.getCcList.url).then(res => {
        this.getCcList2 = res.data.datas;
        let result = [];

        !this.getCcList2.checkDept && (this.getCcList2.checkDept = {})
        !this.getCcList2.fristDept && (this.getCcList2.fristDept = {})

        this.getCcList2.empList.forEach(ele => {
          result.push({
            name: ele.name,
            emplid: ele.emplid,
            dept_descr: ele.dept_descr
          });
        });

        this.getCcList2.empList = result;
      });
    },

    sendBumenAjax(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },

    sendBumenAjax2(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList2;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    sendSecondBumenAjax(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },

    sendBumenAjax(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    back() {
      this.$router.push({
        path: '/requestVacation',
        query: { activeName: 'a' }
      });
    },

    sendAjax() {
        let toExamineBeans = [];

        this.form.shenpiSelect.forEach(ele => toExamineBeans.push({
            "toExamineName": ele.name,
            "toExamineid": ele.emplid
        }));

        let copySendBeans = []
        this.zhihuirenSelect.forEach(ele => copySendBeans.push({
            "toEmplName": ele.name,
            "toEmplid": ele.emplid
        }));
        // let params = {
        //     idea: this.type,
        //     excutionId: this.params.applyId,
        //     comment: this.textarea,
        //     vrNodeId: this.res.activity_id || ''
        // };

        let params = {
            "copySendBeans": copySendBeans,
            "subProcessId":this.params.subProcessId,
            "fromIdea": "string",
            "toExamineBeans": toExamineBeans,
            "toExamineIdea": this.textarea,
        }

        var url 
        if (this.type == '同意') {
            url = this.URL.getexaminationApplyYes.url;
        } else {
            url = this.URL.getexaminationApplyNo.url;
        }



        this.Axios.Post(url, params).then(res => {
            
            this.status = res.data.status;

            let myMessage = this.type == '同意' ? '已同意' : '已驳回';

            if (this.status == 1) {
                Message({
                    message: res.data.message || myMessage,
                    type: 'success'
                });

                this.gotoRouter();
            } else if (this.status == 2) {
                this.gotoRouterDetail();
            }
        });
    },
    onSubmit() {
      if (!this.textarea && this.type !== '同意') {
          Message({
            type: 'error',
            message: `请输入${this.type}意见`
          });

          return;
      }

      let messageInfo = null;

      if (this.type == '同意') {
        if (!this.res.activity_id) {
          messageInfo = '是否确认提交?';
        } else {
          let nextPeople = this.nextPeople;
          if (this.form.shenpiSelect.length) {
            nextPeople = this.form.shenpiSelect[0].name;
          }
          messageInfo = `您确定要发送给${nextPeople}吗?`;
        }
      } else if (this.type == '驳回') {
        messageInfo = '确认驳回？';
      }

      MessageBox.confirm(messageInfo, '询问', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
      })
      .then(() => {
        this.sendAjax();
      })
      .catch(() => {});
    },
    gotoRouter() {
      setTimeout(() => {
        this.$router.push({
          path: '/requestVacation',
          query: { activeName: 'a' }
        });
      }, 1200);
    },
    gotoRouterDetail() {
      setTimeout(() => {
        this.$router.push({
          path: '/requestVacation/t2detail',
          query: { id: this.params.subProcessId }
        });
      }, 1200);
    },
    generateCopyBeans:function(){
        let copySendBeans = []
        this.zhihuirenSelect.forEach(ele => copySendBeans.push({
            "toEmplName": ele.name,
            "toEmplid": ele.emplid
        }));
        return copySendBeans;
    },
    sureSave() {

      if (!this.zhihuirenSelect.length) {
          return;
      } 

      if (!this.isHaveSameCopyPeo(this.zhihuirenSelect)) {
          return;
      }


      MessageBox.confirm('是否确定知会?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.saveChaosong();

          this.dialogVisiable = false;
        })
        .catch(() => {});

    },

    saveChaosong() {

      var copySendBeans = this.generateCopyBeans();

      var params = {
        copySendBeans: copySendBeans,
        subProcessId: this.params.subProcessId,

      };



      this.Axios.Post(this.URL.copyToSend.url, params).then(res => {
        if (res.data.status == 1) {

            this.zhihuirensSave = this.zhihuirensSave.concat(this.zhihuirenSelect);
            this.zhihuirenSelect.forEach((ele, index, arr)=>{
                this.zhihuiren.push(ele.name);
            })           
            Message({
              type: 'success',
              message: '添加成功' || res.data.message
            });
            this.zhihuirenSelect = [];
        } else {
          Message({
            type: 'error',
            message: res.data.message
          });
        }
      });
    },
    getZhihuirenData() {
      this.Axios.Post(this.URL.getCcList.url).then(
        res => {
          this.getCcList = res.data.datas
          !this.getCcList.checkDept && (this.getCcList.checkDept = {})
          !this.getCcList.fristDept && (this.getCcList.fristDept = {})
        }
      );
    },

    getVacationDetail() {
      this.Axios.Post(this.URL.getLeaveInstruction.url,{'subProcessId':this.params.subProcessId}).then(res => {
        let datas = res.data.datas;
        this.aTypeSelect = datas;
      });
    }
  }
};
</script>

<style lang='less'>
.tooltip-300 {
  max-width: 300px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}

.tooltip2 {
  background-color: #38f !important;

  .popper__arrow {
    border-top-color: #38f !important;
  }
  .popper__arrow::after {
    border-top-color: #38f !important;
    border-bottom-color: #38f !important;
  }
}
.xiaojia {
  background-color: #75d155 !important;
  color:#fff !important;
}
.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}

.imgContainer img {
  display: inline-block;
  margin-right:14px;
  max-height: 80px;
}
// .imgContainer img:not(:first-child){
//   margin-right:14px;
// }

.wrap {
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(236, 240, 245);
}
.reason {
  span {
    float: left;
  }
  span:last-of-type {
    max-width: 90%;
    white-space: wrap;
    overflow: hidden;
    word-wrap: break-word;
  }
}
.reasonTitle{
   @diff : 120px;
   display:inline-block;
    word-wrap: break-word;
   width:calc(~'100% - '@diff);
}
.floatReasonTitle{
    float:left;
}

.add-shenpi {
  font-size: 15px;
  margin-left: 12px;
  color: #38f;
  cursor: pointer;
  &:hover {
    color: rgb(83, 154, 253);
  }
}
.detail {
  width: 80%;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 50px;

  .color-one {
    color: #999;
  }
  .color-two {
    color: #38f;
  }
  .color-third {
    color: #3c8dbc;
  }
  .return {
    color: #38f;
    cursor: pointer;
    border: 1px solid #38f;
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
  }

  .return.select {
    color: #fff !important;
    background-color: #38f !important;
  }

  .view {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    .header {
      background-color: #3c8dbc;
      padding: 10px 10px 8px 20px;
      font-size: 15px;
      overflow: hidden;
      > span {
        color: #fff;
        margin-left: 10px;
      }
      > span:first-of-type {
        margin-left: 0;
        color: #38f;
        background-color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
      }
      > span.right {
        float: right;
        margin-top: 1px;
      }

      > span.right.last {
        position: relative;
        top: 2px;
      }
    }

    .content {
      padding: 16px 58px 40px 58px;
      position: relative;
      .span-width {
        width: 90px;
        display: inline-block;
      }

      a {
        cursor: pointer;
        span {
          position: relative;
          top: -4px;
        }
      }

      .word,
      .excel,
      .img,
      .file {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/ 100% 100%;
        margin: 0 8px 0 2px;
      }

      .word {
        background-image: url(../../../../static/images/word.svg);
      }

      .excel {
        background-image: url(../../../../static/images/excel.svg);
      }

      .img {
        background-image: url(../../../../static/images/img.svg);
      }

      .file {
        background-image: url(../../../../static/images/file.svg);
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: #ecf0f5;
        height: 1px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
      }

      & > div {
        margin: 6px 0;
        i.wenhao {
          font-style: normal;
          background-color: #89abc6;
          color: #fff;
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          margin-left: 3px;
          font-size: 12px;
          cursor: pointer;
        }
        & > span:nth-of-type(n + 2) {
          margin-left: 14px;
        }
      }

      & > div:last-of-type {
        overflow: hidden;
        & > p {
          float: left;
          margin-bottom: 4px;
        }

        & > a {
          float: left;
        }

        & > span {
          float: left;
        }
      }
    }

    .steps {
      padding: 0px 0 20px 16px;
      .add-icon {
        position: relative;
        width: 15px;
        height: 15px;
        display: inline-block;
        color: #00aff0;
        background: url(../../../../static/images/addshenpi.svg) no-repeat
          center center /100%;
        a:first-of-type {
          cursor: default;
          position: absolute;
          left: 1.3vw;
          font-size: 10px;
          top: 50%;
          margin-top: -50%;
          transform: scale(0.9);
          line-height: 1.2;
          width: 20vw;
        }

        a:nth-of-type(2) {
          position: absolute;
          transform: scale(0.9);
          width: 4vw;
          left: 22.2vw;
          font-size: 10px;
          top: 50%;
          margin-top: -50%;
          color: #339966;
        }

        @media (min-width: 1380px) {
          a:nth-of-type(2) {
             left: 21.9vw;
          }
        }

        @media (min-width: 1380px) {
          a:nth-of-type(1) {
            left: 1.2vw;
          }
        }
      }

      .add-icon.add {
          background: url(../../../../static/images/addshenpi.svg) no-repeat
          center center /100%;
          cursor: pointer;
          color: rgb(60, 141, 188);
          a {
            cursor: pointer;
            width: 5vw;
            color: #d35757;
            margin-left: 0.8vw;
          }
      }
      .steps-list.last {
          .add-icon.add {
              margin: 40px 0px 0px 0px;
          }
       
      }
      .steps-list.isShowXian{
          .xian.last{
             border:none;
          }  
      }
      .steps-list {
          .add-icon.add {
              margin: 40px 0px 40px 0px;
          }          
      }


      .steps-list {
        & > div,
        & > p {
          display: inline-block;
          vertical-align: top;
        }

        .date {
          min-width: 15%;
        }

        .people {
          width: 30%;
        }

        .message {
          word-wrap: break-word;
          white-space: wrap;
          width: 30%;
          padding-bottom: 20px;
        }

        .buzhou {
          margin-left: 30px;
          width: 8%;
        }

        .xian {
          border-right: 1px dashed #999;
          width: 1px;
          min-height: 60px;
          margin: 0 2vw;
          > span {
            transform: translateX(-50%) scale(1.3);
            background-color: #fff;
            color: #999;
          }
          > span.ok {
            color: #38f;
          }
        }

        .xian.last {
          
          & > span {
            top: 4px;
          }
        }
      }
    }

    .deside {
      margin: 30px 0px 20px 10px;
      text-align: left;
      & > a {
        color: #38f;
        cursor: pointer;
        border: 1px solid #38f;
        padding: 6px 15px;
        border-radius: 15px;
        margin: 0 2px;
      }
      & > a.disable {
        background-color: rgb(238, 241, 246);
        color: #bfcbd9;
        border-color: #d1dbe5;
        cursor: not-allowed;
      }
    }
  }

  .text-area {
    width: 60%;
    margin: 8px 12px 30px 12px;
    .submit {
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .dialog-footer {
    position: relative;
    left: 100%;
    transform: translateX(-50%);
    width: 320px;
  }
}

.dialog {
  overflow-x: hidden;
  .dialog-title {
    display: inline-block;
    text-align: center;
    color: #999;
    font-size: 17px;
    position: relative;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
  }

  .body {
    margin-top: 15px;
    ::-webkit-scrollbar {
      width: 4px;
    }
    ::-webkit-scrollbar-track {
      background-color: #bee1eb;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #00aff0;
    }
    ::-webkit-scrollbar-thumb:active {
      background-color: #00aff0;
    }

    .body-left,
    .body-right {
      padding-left: 20px;
    }
    .body-left {
      height: 380px;
      max-height: 380px;
      overflow-y: auto;
      .checkbox {
        padding: 10px 0 0 10px;
        p {
          padding: 7px 0;
        }
      }
      .mianbao {
        padding: 14px 0 14px 14px;
        position: relative;
        margin-left: 2px;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        &::after {
          content: '';
          position: absolute;
          left: -6px;
          bottom: 6px;
          height: 1px;
          width: 95%;
          background: #f1f1f1;
        }
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 3px;
          height: 14px;
          transform: translateY(-50%);
          background: #38f;
        }
        span {
          float: left;
          margin: 4px 8px 0 8px;
          color: #999;
          font-size: 12px;
          transform: scale(0.7);
        }
        p {
          float: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          max-width: 100px;
        }
        p:first-of-type {
          cursor: pointer;
        }

        p:last-of-type {
          color: #38f;
        }
      }

      .bumen {
        width: 92%;

        & > p {
          padding: 8px 4px;
          cursor: pointer;
          span:first-of-type {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            max-width: 210px;
            display: inline-block;
          }
          span:last-of-type {
            color: #999;
            transform: scale(0.7);
            float: right;
            margin-top: 4px;
          }
        }
      }
      .body-left-people {
        margin-top: 20px;
        padding-right: 100px;
        font-size: 15px;
        & > div {
          margin-top: 10px;
          color: #999999;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          > span {
            font-weight: 500;
          }
        }
      }

      .show-all {
        font-size: 13px;
        margin: 30px 0 0 10px;
        color: #999;
        cursor: pointer;
        margin-bottom: 20px;
      }

      .body-left-title {
        margin-top: 30px;
      }
    }

    .body-right {
      height: 360px;
      max-height: 360px;
      overflow-y: auto;
      .body-right-content {
        & > div {
          margin-top: 20px;

          & > div:first-of-type {
            color: #333;
            float: left;
            max-width: 75%;
            span {
              color: #999;
              margin-left: 6px;
            }
          }

          & > div:last-of-type {
            float: right;
            width: 40px;
            color: #00aff0;
            cursor: pointer;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.fileContainer{
    margin-left: 14px;
    overflow:hidden;
    clear:both;
    display:inline-block;
    width:80%;
}
.fileContainer>a>a{
    margin-top:4px;
}
</style>